<template>

	<view class="container">
		<navbar></navbar>
		<!-- <view class="title"></view> -->
		<!-- tab栏 -->
		<!-- <view class="header f-28">
			<view @tap.stop.prevent="bindHeaderTap" :class="dataType === 'all' ? 'active' : ''" data-type="all">
				<text>能量抽奖</text>
			</view>
			<view @tap="bindHeaderTap" :class="dataType === 'payment' ? 'active' : ''" data-type="payment">
				<text>兑换活动</text>
			</view>
		</view> -->
		<view class="body" v-if="dataType == 'all' && list.length > 0">
			<view class="item" v-for="(item,index) in list" :key="index" @click="goLottery(item.l_id)">
				<view class="img">
					<img :src="item.img" alt="">
				</view>
				<view class="text">
					<view style="height: 70rpx;overflow: hidden;">
						{{item.name}}
					</view>
					<view class="button">
						去参加
					</view>
				</view>
				<view class="rightTop" v-if="item.active_state == 1">进行中</view>
				<view class="rightTop" v-if="item.active_state == 2">未开始</view>
				<view class="rightTop" v-if="item.active_state == 3">已结束</view>
				<view class="rightBottom"></view>
			</view>
		</view>
		<view class="body" v-else-if="dataType == 'payment' && list.length > 0">
			<view class="item" v-for="(item,index) in list" :key="index" @click="nva_Compose(item.e_id)">
				<view class="img">
					<img :src="item.img" alt="">
				</view>
				<view class="text">
					<view style="height: 70rpx;overflow: hidden;">
						{{item.name}}
					</view>
					<view class="button">
						去参加
					</view>
				</view>
				<view class="rightTop" v-if="item.active_state == 1">进行中</view>
				<view class="rightTop" v-if="item.active_state == 2">未开始</view>
				<view class="rightTop" v-if="item.active_state == 3">已结束</view>
				<view class="rightBottom"></view>
			</view>
		</view>
		<view class="yoshop-notcont" v-else>
					<!-- <text class="dy-iconfont icon-empty"></text> -->
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">更多内容敬请期待</text>
				</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				dataType: 'all', // 列表类型
				list: [],
				page: 1,
				last_page:1,//总页数
			}
		},
		onLoad() {
			this.getJadeLotteryList()
		},
		//触底加载
		onReachBottom() {
			console.log('触底')
			// 已经是最后一页
			if (this.page >= this.last_page) {
				app.showToast('已经到底了哦~');
			}else{
				this.page = ++this.page
				if(this.dataType == 'all'){
					this.getJadeLotteryList();
				}else{
					this.getJadeExchangeList()
				}
				
			} // 加载下一页列表
			console.log(this.page)
			
		},
		//下拉刷新
		onPullDownRefresh(e) {
			if(this.dataType == 'all'){
				this.list = []
				this.getJadeLotteryList();
			}else{
				uni.stopPullDownRefresh();
			}
			
		},
		mounted() {

		},

		methods: {
			/**
			 * 切换标签
			 */
			bindHeaderTap(e) {
				this.setData({
					dataType: e.currentTarget.dataset.type,
					isLoading: true,
					page: 1,
					list:[]
				}); // 获取订单列表
				if(e.currentTarget.dataset.type == 'all'){
					this.getJadeLotteryList()
				}else{
					this.getJadeExchangeList()
				}

				// this.getOrderList(e.currentTarget.dataset.type);
			},
			//跳转转盘
			goLottery(e){
				// console.log(encodeURIComponent);
				// console.log(encodeURIComponent(JSON.stringify(e)))
				uni.navigateTo({
					url:`./roundTurntable?l_id=${encodeURIComponent(JSON.stringify(e))}`
				})
			},
			//跳转合成能量
			// nva_Compose(e){
			// 	uni.navigateTo({
			// 		url:`./compose?e_id=${e}`
			// 	})
			// },
			//奖品列表
			getJadeLotteryList() {
				let _this = this
				app._post_form('Jadegoods/getJadeLotteryList', {
					limit:10,
					page:_this.page,
					points_state:1,
					consume_type:2
					// consume_type 1能量抽奖 2藏品抽奖
				}, function(result) {
					if (1 == result.code) {
						// _this.list = result.data.list.data
						_this.last_page = result.data.list.last_page
						let a = result.data.list
						console.log(a.data)
						a.data.forEach((item) => {
							_this.list.push(item)
						})
						
					}
				}, null, function() {
					// 解除按钮禁用
					// app.showError(result.msg);
					uni.stopPullDownRefresh();
				});
			},
			//奖品列表
			getJadeExchangeList() {
				let _this = this
				app._post_form('Jadegoods/getJadeExchangeList', {
					limit:10,
					page:_this.page,
					points_state:1
				}, function(result) {
					if (1 == result.code) {
						// _this.list = result.data.list.data
						_this.last_page = result.data.list.last_page
						let a = result.data.list
						console.log(a.data)
						a.data.forEach((item) => {
							_this.list.push(item)
						})
						
					}
				}, null, function() {
					// 解除按钮禁用
					// app.showError(result.msg);
					uni.stopPullDownRefresh();
				});
			},
		}

	}
</script>


<style scoped lang="scss">
.container{
	box-sizing: border-box;
	// min-height: 100vh;
	// padding:110rpx 50rpx 40rpx 50rpx;
	// background:  #000 url('https://qiniu.wiod.cn/detail/userBg.png') 40rpx 117rpx no-repeat;
	background:  $uni-bg-color;
	background-size: 710rpx 512rpx;
}
	.title {
		// margin-top: 100rpx;
		width: 100%;
		height: 30rpx;
		background: url(@/static/images/orderTitle.png);
		background-size: 100% 100%;
	}

	.header {
		width: 100%;
		height: 94rpx;
		// border-bottom: 1rpx solid #e4e4e4;
		display: flex;
		background: $uni-bg-color;
		line-height: 88rpx;
		position: fixed;
		top: 28rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		/* top: 44px;
		top: calc(44px + constant(safe-area-inset-top));
		top: calc(44px + env(safe-area-inset-top)); */
		z-index: 100;
	}

	.header-placeholder {
		height: 146rpx;
	}

	.header view {
		flex: 1;
		text-align: center;
		padding: 0 15rpx;
	}

	.header view text {
		display: block;
	}

	.header view.active text {
		// color: $uni-text-color-main;
		color: #CCA754;
		border-bottom: 3rpx solid $uni-border-color-main;
	}

	.body {
		// margin-top: 100rpx;
		padding: 32rpx;
		color: $uni-text-color;
		font-size: 28rpx;
		.item {
			display: flex;
			margin-top: 15rpx;
			padding: 30rpx;
			background-color: $uni-bg-color-grey;
			border-radius: 8rpx;
			position: relative;
			.img {
				width: 160rpx;
				height: 160rpx;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover!important;
					border-radius: 8rpx;
				}
			}
			.text{
				width: 300rpx;
				
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				    justify-content: space-between;
				.button{
					color: #D6B05A;
					width: 100rpx;
					height: 40rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 40rpx;
					background: rgba(214,176,90,0.12);
					border: 1px solid #D6B05A;
				}
			}
			.rightBottom{
				position: absolute;
				bottom: 0;
				right: 0;
				width: 100rpx;
				height: 100rpx;
				background: url(@/static/images/bottomIcon.png);
				background-size: 100% 100%;
			}
			.rightTop{
				font-size: 26rpx;
				color: #333;
				background-color: #FEc786;
				text-align: center;
				line-height: 40rpx;
				position: absolute;
				top: 30rpx;
				right: 0;
				width: 100rpx;
				height: 40rpx;
				border-radius: 4rpx 0px 0px 4rpx;
			}
			
			
		}
		
	}
</style>
